$(function () {


    // 1.历史记录渲染
    // let arr = ['小个子', '小大象', '疯吵', '大西瓜']
    // 向本地存储一些历史数据
    // localStorage.setItem('search', JSON.stringify(arr))

    // 1.取本地JSON字符串进行渲染封装
    function arrly() {
        // 到本地获取JSON字符串，转成数组
        let his = JSON.parse(localStorage.getItem('search')) || []
        // 使用模板进行渲染
        let str = template('tmp', {list: his})
        $('.search-con').html(str)
    }
    arrly()

    // 2.清空历史记录
    $('.search-con').on('click','.history-cle',function () {
        mui.confirm('确定要清空?','警告!!!',['不请','清空'],function (e) {
            if (e.index == 1){
                // 清空本地JSON字符串
                localStorage.removeItem('search')
                // 重新渲染
                arrly()
            }
        })
    })


    // 3.清除单个记录
    $('.search-con').on('click','.history-del',function () {
        // 记录this 的值
        let th = this
        mui.confirm('确定要删除吗?','警告!!!',['删除','不删除'],function (e) {
            if (e.index == 1){
                let index = $(th).data('index')
                // 到本地JSON获取到字符串，转成数组
                let arr = JSON.parse(localStorage.getItem('search'))

                // 删除对应的数据
                arr.splice(index,1)

                // 将数组转成JSON字符串，放到本地
                localStorage.setItem('search',JSON.stringify(arr))

                // 重新渲染
                arrly()
            }
        })
    })


    // 4.添加历史记录
    $('.search-btn').click(function () {
        // 获取输入框的值
        let tex = $('.search-txt').val()

        // 判断用户是否已经输入关键字
        if (tex.trim().length == 0) {
            mui.toast('请输入关键字...')
            return
        }

        // 去本地取JSON字符串，然后转成数组
        let arr = JSON.parse(localStorage.getItem('search'))

        // 判断是否有重复的数据
        let index = arr.indexOf(tex)
        if (index > -1){
            // 有重复的进行后面那个删除，再赋值到最前面
            arr.splice(index,1)
        }
        // 没有重复的直接添加到数组的最开始
        arr.unshift(tex)

        // 数组最大可以放6个
        if (arr.length > 6) {
            // 进行最后一个删除
            arr.pop()
        }

        // 将数组转成JSON字符串，然后放到本地
        localStorage.setItem('search',JSON.stringify(arr))

        // 重新渲染
        arrly()

        // 清空输入框
        $('.search-txt').val('')

        // 跳到指定的页面 ==》 带输入框的值一起过去
        location.href = './searchList.html?key='+tex
    })

})